﻿<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>jQuery带次数的大转盘抽奖代码 - 站长素材</title>
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">

<link rel="stylesheet" type="text/css" href="css/reset.css" />
<style>
	.g-content {
		width: 100%;
		background: #fbe3cc;
		height: auto;
		font-family: "微软雅黑", "microsoft yahei";
	}
	.g-content .g-lottery-case {
		width: 500px;
		height: 445px;
		margin: 0 auto;
		overflow: hidden;
	}
	
	.g-content .g-lottery-case .g-left h2 {
		font-size: 20px;
		line-height: 32px;
		font-weight: normal;
		margin-left: 20px;
	}
	
	.g-content .g-lottery-case .g-left {
		width: 450px;
		float: left;
	}
	
	.g-lottery-box {
		width: 400px;
		height: 400px;
		margin-left: 30px;
		position: relative;
		background: url(img/lottery/ly-plate-c.gif) no-repeat;
	}
	
	.g-lottery-box .g-lottery-img {
		width: 340px;
		height: 340px;
		position: relative;
		background: url(img/lottery/bg-lottery.png) no-repeat;
		left: 30px;
		top: 30px;
	}
	
	.g-lottery-box .playbtn {
		width: 186px;
		height: 186px;
		position: absolute;
		top: 77px;
		left: 77px;
		background: url(img/lottery/playbtn.png) no-repeat;
	}
</style>

</head>

<body>
<div class="g-content">
	<div class="g-lottery-case">
		<div class="g-left">
			<h2>您已拥有<span class="playnum"></span>次抽奖机会，点击立刻抽奖！~</h2>
			<div class="g-lottery-box">
				<div class="g-lottery-img">
					<a class="playbtn" href="javascript:;" title="开始抽奖"></a>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.rotate.min.js"></script>
<script>
	$(function() {
		var $btn = $('.playbtn');
		var playnum = 1; //初始次数，由后台传入
		$('.playnum').html(playnum);
		var isture = 0;
		var clickfunc = function() {
			var data = [1, 2, 3, 4, 5, 6];
			//data为随机出来的结果，根据概率后的结果
			data = data[Math.floor(Math.random() * data.length)];
            
			switch(data) {
				case 1:
					rotateFunc(1, 0, '恭喜您获得2000元理财金!');
					break;
				case 2:
					rotateFunc(2, 60, '谢谢参与~再来一次吧~');
					break;
				case 3:
					rotateFunc(3, 120, '恭喜您获得5200元理财金!');
					break;
				case 4:
					rotateFunc(4, 180, '恭喜您获得100元京东E卡，将在次日以短信形式下发到您的手机上，请注意查收!');
					break;
				case 5:
					rotateFunc(5, 240, '谢谢参与~再来一次吧~');
					break;
				case 6:
					rotateFunc(6, 300, '恭喜您获得1000元理财金!');
					break;
			}
		}
		$btn.click(function() {
			if(isture) return; // 如果在执行就退出
			isture = true; // 标志为 在执行
			//先判断是否登录,未登录则执行下面的函数
			if(1 == 2) {
				$('.playnum').html('0');
				alert("请先登录");
				isture = false;
			} else { //登录了就执行下面
				if(playnum <= 0) { //当抽奖次数为0的时候执行
					alert("没有次数了");
					$('.playnum').html(0);
					isture = false;
				} else { //还有次数就执行
					playnum = playnum - 1; //执行转盘了则次数减1
					if(playnum <= 0) {
						playnum = 0;
					}
					$('.playnum').html(playnum);
					clickfunc();
				}
			}
		});
		var rotateFunc = function(awards, angle, text) {
			isture = true;
			$btn.stopRotate();
			$btn.rotate({
				angle: 0,
				duration: 4000, //旋转时间
				animateTo: angle + 1440, //让它根据得出来的结果加上1440度旋转
				callback: function() {
					isture = false; // 标志为 执行完毕
					alert(text);
				}
			});
		};
	});
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>
